<%@ page import="lombok.var" %><%--
  Created by IntelliJ IDEA.
  User: 11065
  Date: 2021/10/26
  Time: 21:12
  To change this template use File | Settings | File Templates.
--%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>车次</title>
</head>
<body>
<a href="/" style="margin-top: 5px;text-align: right"><h4>退出</h4></a>
<div id="1">
    <h1 align="center">车次列表</h1>
    <h2 style = "position:relative;left:25%"><a class="btn btn-sm btn-success" href="addOrder" th:href="@{/addOrder}">添加车次</a></h2>
    <table align='center' border='1' cellspacing='0' style="width:50%">
        <tr style="background-color: gainsboro">
            <td align="center">列车号</td>
            <td align="center">出发时间</td>
            <td align="center">到达时间</td>
            <td align="center">起点站</td>
            <td align="center">终点站</td>
            <td align="center">操作</td>
        </tr>
        <c:forEach items="${车次}" var="o" varStatus="st">
            <tr style="background-color: antiquewhite">
                <td align="center">${o.列车号}</td>
                <td align="center"><fmt:formatDate value="${o.出发时间}" pattern=" yyyy年MM月dd日  HH:mm:ss " /></td>
                <td align="center"><fmt:formatDate value="${o.到达时间}" pattern=" yyyy年MM月dd日  HH:mm:ss "/></td>
                <td align="center">${o.起点站}</td>
                <td align="center">${o.终点站}</td>
                <!--<td><a class="btn btn-sm btn-success"  href="编辑车次" th:href="@{/编辑车次}">编辑</a></td>
                <td><a class="btn btn-sm btn-success"  href="删除车次" th:href="@{/删除车次}">删除</a></td>-->
                <td align="center"><button style="background-color:cornflowerblue; font-size:95%; font-weight: 550" type="button"
                            onclick="edit('${o.列车号}', '${o.出发时间}', '${o.到达时间}', '${o.起点站}', '${o.终点站}')">
                    编辑</button>
                <button style="background-color:crimson; font-size:95%;; font-weight: 550" type="button"
                            onclick="dele('${o.列车号}', '${o.出发时间}', '${o.到达时间}', '${o.起点站}', '${o.终点站}')">
                    删除</button></td>
            </tr>
        </c:forEach>
    </table>
</div>

<div align="center" style="display:none" id="2">
    <h1>编辑车次</h1>
    <form style='font-size:115%'>
        <div><label>列车号</label></div>
        <div>
            <input style="background-color: azure" type="text" list="tidlist" id="t_id" />
            <datalist id="tidlist"> </datalist>
        </div><br><br>
        <div><label>出发时间</label></div>
        <div>
            <input style="background-color: azure" type="text" name="btime" id="b_time"/>
        </div><br><br>
        <div><label>到达时间</label></div>
        <div>
            <input style="background-color: azure" type="text" name="etime" id="e_time" />
        </div><br><br>
        <div><label>起点站</label></div>
        <div>
            <input style="background-color: azure" type="text"   name="bstation" list="bstation_list" id="b_station"/>
            <datalist id="bstation_list">
                <option>北京</option>
                <option>上海</option>
                <option>十堰</option>
            </datalist>
        </div><br><br>
        <div><label>终点站</label></div>
        <div>
            <input style="background-color: azure" type="text"   name="estation" list="estation_list" id="e_station"/>
            <datalist id="estation_list">
                <option>北京</option>
                <option>上海</option>
                <option>十堰</option>
            </datalist>
        </div><br><br>
        <div >
            <button style="font-size: medium" type="button" onclick="yes()">确定</button>
            <button style="font-size: medium" type="button" onclick="reback()">返回</button>
        </div>
    </form>
</div>

</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script language="JavaScript">
    var 该车次;
    function edit(列车号, 出发时间, 到达时间, 起点站, 终点站){
        var order = {};
        order.列车号 = 列车号;
        order.出发时间 = 出发时间;
        order.到达时间 = 到达时间;
        order.起点站 = 起点站;
        order.终点站 = 终点站;
        该车次 = order;
        var traget1=document.getElementById("1");
        var traget2=document.getElementById("2");
        traget1.style.display="none";
        traget2.style.display="";
        show();
    }
    function show(){
        document.getElementById("t_id").placeholder = 该车次.列车号;
        document.getElementById("b_time").placeholder = 该车次.出发时间;
        document.getElementById("b_time").onfocus = function a(){
            document.getElementById("b_time").type ="datetime-local";
            document.getElementById("b_time").focus();
        }
        document.getElementById("e_time").placeholder = 该车次.到达时间;
        document.getElementById("e_time").onfocus = function a(){
            document.getElementById("e_time").type ="datetime-local";
            document.getElementById("e_time").focus();
        }
        document.getElementById("b_station").placeholder = 该车次.起点站;
        document.getElementById("e_station").placeholder = 该车次.终点站;
    }
    function yes(){
        var 列车号 = $("#t_id").val();
        var 出发时间 = $("#b_time").val();
        var 到达时间 = $("#e_time").val();
        var 起点站 = $("#b_station").val();
        var 终点站 = $("#e_station").val();
        var 编辑车次 = {};
        编辑车次.列车号1 = 该车次.列车号;
        编辑车次.出发时间1 = 该车次.出发时间;
        编辑车次.到达时间1 = 该车次.到达时间;
        编辑车次.起点站1 = 该车次.起点站;
        编辑车次.终点站1 = 该车次.终点站;
        编辑车次.列车号2 = 列车号;
        编辑车次.出发时间2 = 出发时间;
        编辑车次.到达时间2 = 到达时间;
        编辑车次.起点站2 = 起点站;
        编辑车次.终点站2 = 终点站;
        $.ajax({
            type: "post",
            url: "edit",
            contentType: "application/json; charset=UTF-8",
            // data: {"id":id,"bTime":btime,"eTime":etime,"bStation":bstation,"eStation":estation},
            data: JSON.stringify(编辑车次),
            dataType: "json",
            success:function (data) {
                if (data.code == 200){
                    alert("编辑成功！")
                    //location.reload();
                    window.location='/Order';
                    //window.history.go(-1);
                }else {
                    alert("编辑失败！")
                }
            },
            error:function (xhr, textStatus, errorThrown) {
                /*错误信息处理*/
                alert("进入error---");
                alert("状态码："+xhr.status);
                alert("状态:"+xhr.readyState); //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                alert("错误信息:"+xhr.statusText );
                alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                alert("请求状态："+textStatus);
                alert(errorThrown);
                alert("请求失败");
            }
        })
    }
    function reback(){
        location.reload();
    }
    function dele(列车号, 出发时间, 到达时间, 起点站, 终点站){
        var order = {};
        order.列车号 = 列车号;
        order.出发时间 = 出发时间;
        order.到达时间 = 到达时间;
        order.起点站 = 起点站;
        order.终点站 = 终点站;
        $.ajax({
            type: "post",
            url: "delete",
            contentType: "application/json; charset=UTF-8",
            // data: {"id":id,"bTime":btime,"eTime":etime,"bStation":bstation,"eStation":estation},
            data: JSON.stringify(order),
            dataType: "json",
            success:function (data) {
                if (data.code == 200){
                    alert("删除成功！")
                    location.reload();
                }else {
                    alert("删除失败！")
                }
            },
            error:function (xhr, textStatus, errorThrown) {
                /*错误信息处理*/
                alert("进入error---");
                alert("状态码："+xhr.status);
                alert("状态:"+xhr.readyState); //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                alert("错误信息:"+xhr.statusText );
                alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                alert("请求状态："+textStatus);
                alert(errorThrown);
                alert("请求失败");
            }
        })
    }
</script>
<canvas id="cas" style="position:absolute; top:0px; left:0px; z-index:-1;"></canvas>
<script>
    var canvas = document.getElementById("cas");
    var ctx = canvas.getContext("2d");
    resize();
    window.onresize = resize;
    function resize() {
        canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
    var RAF = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();
    var warea = {x: null, y: null, max: 20000};
    window.onmousemove = function(e) {
        e = e || window.event;
        warea.x = e.clientX;
        warea.y = e.clientY;
    };
    window.onmouseout = function(e) {
        warea.x = null;
        warea.y = null;
    };
    var dots = [];
    for (var i = 0; i < 350; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var xa = Math.random() * 2 - 1;
        var ya = Math.random() * 2 - 1;
        dots.push({
            x: x,
            y: y,
            xa: xa,
            ya: ya,
            max: 5000
        })
    }
    setTimeout(function() {
        animate();
    }, 100);
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var ndots = [warea].concat(dots);
        dots.forEach(function(dot) {
            dot.x += dot.xa;
            dot.y += dot.ya;
            dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
            dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;
            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
            for (var i = 0; i < ndots.length; i++) {
                var d2 = ndots[i];
                if (dot === d2 || d2.x === null || d2.y === null) continue;
                var xc = dot.x - d2.x;
                var yc = dot.y - d2.y;
                var dis = xc * xc + yc * yc;
                var ratio;
                if (dis < d2.max) {
                    if (d2 === warea && dis > (d2.max / 2)) {
                        dot.x -= xc * 0.03;
                        dot.y -= yc * 0.03;
                    }
                    ratio = (d2.max - dis) / d2.max;
                    ctx.beginPath();
                    ctx.lineWidth = ratio / 2;
                    ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
                    ctx.moveTo(dot.x, dot.y);
                    ctx.lineTo(d2.x, d2.y);
                    ctx.stroke();
                }
            }
            ndots.splice(ndots.indexOf(dot), 1);
        });
        RAF(animate);
    }
</script>
</html>

